[lodash] compact 메소드 알아보기

오늘은 lodash compact() 메소드에 대하여 알아보려고 합니다. 개인적으로 lodash와 관련된 모든 정보들을 올리는 것이 목표입니다. 최근들어 lodash 관련 포스팅을 꾸준히 올리고 있으로 앞으로도 계속 lodash 관련 글들을 올릴 계획입니다~

# lodash compact() 메소드 알아보기

늘 그렇지만 compact의 사전적 의미를 먼저 안알아볼 수 없겠죠! 영단어 compact의 의미는 다음과 같습니다...

compact a. 간단한, 작은, 조밀조밀한

간단하게 해석하면 뭔가를 좀 더 작으면서 단단하게 만들어 준다는 뜻입니다. 실제로 lodash의 compact()는 이런 의미로 동작하는 것 같습니다. compact()는 배열에 사용하는 메소드로 가지고 있는 모든 falsy 값들을 제거해줍니다. falsy 값을 제거해주니 좀 더 아담해지면서 컴팩트해졌다라고 할 수도 있겠군요. 다시 정리하면 아래와 같습니다.

_.compact(배열)

// 배열에서 falsy(null, undefined, 0, '', NaN)를 제거한 값을 반환함


실제로 데이터를 많이 다루는 경우 compact()를 사용하면 배열의 불필요한 값들을 제거할 때 매우 유용하게 사용됩니다. 데이터를 처리하는 과정에서 불필요한 값을 배열에서 바로 반복해 제거하기 보다는 falsy값을 반환해두었다가 나중에 배열 메소드 filter()를 사용하거나 하여 한 번에 제거하는 것이 편리하기 때문입니다. 그럼 아래에서 간단한 예제를 만들어보겠습니다.

! lodash compact() 예제보기

아래 예제는 다양한 falsy값을 가지는 배열값들에 _.compact()를 사용하여 출력한 결과값들입니다. 각각 어떻게 반환되는지 확인해보도록 하겠습니다.

시작에 앞서서 아무 값도 입력하지 않으면 어떻게 나타날까요? 이 경우 기본적으로 빈 배열을 반환합니다.

다음은 숫자에 적용한 예제입니다. 0이 포함되어 있기 때문에 0이 삭제되어 반환될 것을 예상할 수 있습니다.

결과 역시 0이 제외되어 반환되었습니다.


이번에는 여러가지 다양한 falsy가 포함된 경우를 한 번에 적용하고 결과를 알아봅니다.

보시면 falsy에 해당하는 모든 값들만 제외되고 반환된 것을 볼 수 있습니다. falsy 값을 쉽게 제거해주니 코드를 매우 간단하게 컴팩트하게 만들어 줄 수 있군요!!

! 자바스크립트 배열 메소드 filter()를 사용하여 구현해보기

만약 첫 번째 예제를 lodash의 compact()를 사용한 것과 비교해보면 어떤지 한 번 알아봅니다. 아까 알아봤던 예제를 다시 한 번 살펴봅니다.

위 코드를 자바스크립트 배열 함수 filter()를 사용하여 바꿔봅니다. 먼저 falsy를 제거하기 위한 함수가 필요하겠습니다. 아래처럼 Arrow function을 이용하여 만들 수도 있겠네요.

둘 다 동일합니다. 이를 적용해서 결과를 다시 확인해보겠습니다.

다음 예제에 적용하여도 결과는 동일하게 나타날 것입니다.

확인해보니 실제로도 동일했습니다.


여기까지 lodash 메소드 compact()에 대하여 알아봤습니다.